<script lang="ts" setup>
import { getNavbarHeihgt } from '@/store'
import { Pages, back, relaunch } from '@/utils'
interface Props {
  /**
   * 是否是自定义导航
   */
  custom?: boolean | string
  /**
   * 是否返回
   */
  isback?: boolean
  /**
   * 标题
   */
  title?: string
  /**
   * 标题颜色
   */
  color?: string
  /**
   * 背景色
   */
  bgcolor?: string
  /**
   * 是否固定
   */
  fixed?: boolean | string
  /**
   * 是否背景透明
   */
  transparent?: boolean | string
  /**
   * 设置层级
   */
  zIndex?: number | string
  /**
   * 是否展示
   */
  ishow?: boolean
}

withDefaults(defineProps<Props>(), {
  // 是否是自定义导航
  custom: true,
  // 是否返回
  isback: true,
  // 标题
  title: '',
  // 标题颜色
  color: '#fff',
  // 背景色
  bgcolor: '#fff',
  // 是否固定
  fixed: true,
  // 是否背景透明
  transparent: false,
  // 设置层级
  zIndex: 2,
  ishow: false,
})
onMounted(() => {

})

const navHeight = computed(() => {
  const { statusBarH, customBarH } = getNavbarHeihgt()
  return {
    statusBarH,
    customBarH,
  }
})

// 页面数量 当只有一个页面且不是主页面的时候 back图标变成home图标
const pagesCount = computed(() => {
  return getCurrentPages().length
})

const pagesTitle = computed(() => {
  const page = getCurrentPages()[pagesCount.value - 1]
  let res = ''
  for (const key in Pages) {
    const val = Pages[key as keyof typeof Pages]?.slice(1)
    const route = page.route
    if (route === val) {
      res = key
      break
    }
  }
  return res
})

const handleLeftClick = () => {
  if (pagesCount.value === 1)
    relaunch(Pages.首页)
  else
    back()
}
</script>

<template>
  <view v-if="ishow">
    <view class="y__navbar">
      <view
        class="y__navbar-wrap flex items-center relative box-border left-0"
        :class="{ custom, fixed: fixed || transparent }"
        :style="{ 'height': `${navHeight.customBarH}px`, 'padding-top': `${navHeight.statusBarH}px`, 'background': bgcolor, 'color': color, 'z-index': zIndex as number }"
      >
        <!-- 返回  -->
        <view v-if="isback" class="action navbar-action__left" @click="handleLeftClick">
          <template v-if="$slots.back">
            <slot name="back" />
          </template>
          <template v-else>
            <image v-if="pagesCount === 1" src="../static/home.png" class="w20px h20px" />
            <image v-else src="../static/back.png" class="w20px h20px" />
          </template>
          <slot name="backText" />
        </view>
        <slot name="left" />

        <!-- //标题 -->
        <view class="navbar-title absolute ">
          <template v-if="$slots.title">
            <slot name="title" />
          </template>
          <template v-else>
            <text :style="{ color }">
              {{ title || pagesTitle }}
            </text>
          </template>
        </view>

        <!-- //右侧 -->
        <view class="action navbar-action__right">
          <slot name="right" />
        </view>
      </view>
    </view>
    <view v-if="!transparent" :style="{ height: `${navHeight.customBarH}px` }" />
  </view>
</template>

<style lang="scss" scoped>
.nvuefont {
  font-family: nvueIcon;
}

.y__navbar {
  /* #ifndef APP-NVUE */
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  display: -ms-flexbox;
  /* #endif */
  flex-direction: row;
}

.y__navbar-wrap {
  flex: 1;
  flex-direction: row;
  align-items: center;
  background-color: #fff;
  color: #333;
  justify-content: space-between;
  min-height: 90rpx;
  position: relative;
  z-index: 2021;
}

.y__navbar-wrap.custom {
  /* #ifdef MP-WEIXIN */
  padding-right: 200rpx;
  /* #endif */
  /* #ifdef MP-ALIPAY */
  padding-right: 150rpx;
  /* #endif */
}

.y__navbar-wrap.fixed {
  /* #ifdef APP-NVUE */
  left: 0;
  right: 0;
  /* #endif */
  /* #ifndef APP-NVUE */
  width: 100%;
  /* #endif */
  max-width: 750rpx;
  position: fixed;
  top: 0;
}

.y__navbar-wrap .action {
  /* #ifndef APP-NVUE */
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  display: -ms-flexbox;
  height: 100%;
  max-width: 100%;
  /* #endif */
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

/*左侧*/
.navbar-action__left {
  font-size: 32rpx;
  padding: 0 24rpx;
}

.navbar-action__left .iconfont {
  font-size: 42rpx;
}

/*标题*/
.y__navbar-wrap .navbar-title {
  flex: 1;
  font-size: 34rpx;
  left: 50%;
  transform: translateX(-50%);
}

.y__navbar-wrap .navbar-title.center {
  /* #ifdef APP-NVUE */
  left: 0;
  right: 0;
  /* #endif */
  /* #ifndef APP-NVUE */
  width: 100%;
  z-index: -1;
  /* #endif */
  align-items: center;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
}

.y__navbar-wrap.custom .navbar-title.center {
  /* #ifdef MP */
  width: auto;
  align-items: auto;
  text-align: left;
  position: static;
  /* #endif */
}

/*搜索条*/
.navbar-action__search.action {
  flex: 1;
  justify-content: flex-start;
}

.navbar-action__right {
  font-size: 32rpx;
  padding-right: 24rpx;
}

.navbar-action__right .iconfont {
  font-size: 42rpx;
}
</style>
